<template>
	<view class="modular">
		<view class="headerBox">
			<view class="header">
				<view class="information">
					<view>
						<view><text>会员</text>：{{userInfo.realName}} </view>
						<view><text>填写日期</text>：{{data.fillFormDate}}</view>
					</view>
					<view>
						<view><text>性别</text>：{{userInfo.sex == 1?'男':'女'}} </view>
						<view><text>年龄</text>：{{userInfo.age}}</view>
					</view>
					<view>
						<view><text>评估人</text>：{{data.userHealthName}}</view>
						<view><text>评估日期</text>：{{data.lastUpdateTime && data.lastUpdateTime.split(' ')[0]}}</view>
					</view>
				</view>
			</view>
			
			<view class="connectBox" v-show="!searchBarFixed">
				<image src="@/static/img/healthStatus/connect@2x.png"></image>
				<image src="@/static/img/healthStatus/connect@2x.png"></image>
			</view>
		</view>
		<view class="mainContent">
			<view class="specific">
				<image src="@/static/img/futureDiseases/obesityDetails@2x.png" class="title"></image>
				<view class="single" v-for="(item,index) in questionData" :key="index">
					<image src="@/static/img/healthStatus/questionIcon@2x.png"></image>
					<view>
						<view class="question">{{item.name}}</view>
						<view class="answer">
							{{answer[index] && answer[index].userValue}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {age,distance} from "@/static/js/filter.js"
	export default {
		data(){
			return {
				userInfo:{},
				data:{},
				questionData:[],
				answer:[],
				searchBarFixed: false,
			}
		},
		onLoad(options){
			const _this = this;
			_this.$api.findByUserId(options.userId).then((res)=>{
				_this.userInfo = res.data.result
			})
			_this.findByTopicsTypeAxios().then((ares)=>{
				_this.questionData = ares['48'].adTopicsRepliesEntityList
				_this.$api.appDiseaseDangeDetail(options.id).then((res)=>{
					_this.data = res.data.result
					_this.answer = res.data.result.userTopicsEntities
				})
			})
		},
		onPageScroll() {
			this.searchBarFixed = this.distance('mainContent');
		},
		methods:{
			age,
			distance,
			// 获取题目
			findByTopicsTypeAxios(){
				return new Promise((success,error)=>{
					this.$api.findByTopicsType('ids=48').then((res)=>{
						if(res){
							this.questionData = res.data.result['48'].adTopicsRepliesEntityList.map((a)=>{
								a.adTopicsRepliesEntityList = a.adTopicsRepliesEntityList.map((b)=>{b.checked = false;return b})
								return a
							})
							success(res.data.result)
						}else{
							error('')
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.modular {
		width: 750upx;
		min-height: calc(100vh - 44px);
		background-color: #F8F8F8;
		position: relative;
		.headerBox {
			position: fixed;
			top: 88upx;
			left: 0;
			width: 100%;
			z-index: 10;
		}
		.header {
			width: 100%;
			background: #05C6AD;
			padding: 38upx 0;
			box-sizing: border-box;
			.information {
				width: 702upx;
				height: 192upx;
				background: #FFFFFF;
				margin: 0 auto;
				border-radius: 20upx;
				padding:20upx 32upx;
				box-sizing: border-box;
				overflow: hidden;
				view {
					display: flex;
					align-items: center;
					line-height: 48upx;
					color: #333333;
					font-size: 30upx;
					view{
						flex: 1;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						display: flex;
						text{
							display: block;
							width: 120upx;
							text-align: justify;
							text-align-last: justify; 
						}
					}
				}
			}
		}
		.connectBox {
			width: 100%;
			position: absolute;
			transform: translateY(-50%);
			left: 0;
			display: flex;
			justify-content: space-between;
			margin-top: 10upx;
			image:nth-child(1) {
				width: 22upx;
				height: 64upx;
				margin-left: 80upx;
			}
			image:nth-child(2) {
				width: 22upx;
				height: 64upx;
				margin-right: 80upx;
			}
		}
		.mainContent {
			width: 702upx;
			margin: 270upx auto 0;
			height: 100%;
			padding-top:18upx;
			.specific {
				background-color: #FFFFFF;
				width: 100%;
				border-radius: 22upx;
				padding: 34upx 30upx;
				box-sizing: border-box;
				position: relative;
				margin-bottom: 24upx;
				.title {
					width: 298upx;
					height: 36upx;
					margin-bottom: 12upx;
					display: table;
					margin: 0 auto;
				}
				.single {
					display: flex;
					padding: 36upx 0 32upx;
					border-bottom: 1upx dashed #E6E6E6;
					image {
						width: 24upx;
						height: 24upx;
						margin:6upx 13upx 0 0;
					}
					view {
						flex: 1;
						color: #333333;
						font-size: 30upx;
						line-height: 40upx;
						.answer {
							color: #000000;
							font-weight: bold;
							margin-top: 10upx;
						}
					}
				}
				.single:last-child {
					border-bottom: none;
				}
			}
			
		}
	}
</style>
